<template>
    <div class="bottomComponents">
        <div class="bottomWrap">
            <div style="width: 100%;height: 1vh;"></div>
            <div class="bottomComponentsContent">
                <div class="bottomComponentsContentTop">
                    <a href="">未来蜂帐号用户协议</a>
                    <a href="">关于未来蜂与隐私的声明</a>
                    <a href="">常见问题</a>
                    <a href="" style="border: 0;">Cookie</a>
                </div>
                <div class="bottomComponentsContentBottom">
                    <span style="color:rgba(0, 0, 0, .3); font-size: 14px;"> © 2012-2024 未来蜂有限公司 版权所有</span>
                </div>
            </div>

        </div>
    </div>
</template>
<script setup>
import {ref } from 'vue'

</script>
<style scoped lang="scss">
*{
    border: 0;
  padding:0;
  box-sizing: border-box;
}
a {
  text-decoration: none; /* 去掉下划线 */
  color: inherit; /* 继承父元素的字体颜色 */
  background: none; /* 去掉背景颜色 */
  border: none; /* 去掉边框 */
}
.bottomComponents{
    height: 113px;
    width:  100% ;
    background-color: #f1f1f1;
    .bottomWrap{
        padding:30px 20% 30px 20%;
        .bottomComponentsContent{
            height: 100%;
            width:  100%;
            display: flex;
            flex-direction: column;
       /*    border: 0.667px black solid; */
          .bottomComponentsContentTop{
            display: flex;
            justify-content: space-evenly;
            flex: 1;
            a{
                padding-right:6%;
                border-right:0.667px black solid ;
                font-size: 14px;
            }

          }
          .bottomComponentsContentBottom{
            flex: 1;
            text-align: center; 
            margin-top:11px;
            width: 100%; 
          }
        }
    }
}
</style>
